<template>
	<div>
		<div class="img">
			<div><span>头像</span></div>
		</div>
		<div class="name">
			<b>{{info.name}}</b>
		</div>
		<div class="social">
			<span>{{funs}} 粉丝</span><span>{{focus}} 关注</span>
		</div>
		<div class="introduction">
			<span>{{info.introduction}}</span>
		</div>
	</div>
</template>
<script>
	import {getUserInfo} from './../../js/data'
	export default {
		data: function () {
			return {
				info: {}
			}
		},
		vuex: {
			getters: {
				sinfo: state => state.user
			}
		},
		route: {
			activate: function () {
				let UserID = this.$route.params.UserID
				// console.log(UserID)
				if (UserID === '0') {
					this.info = this.sinfo
					console.log(this.info.fans.length)
				} else {
					getUserInfo(UserID)
				}
			}
		},
		computed: {
			focus: function () {
				return (this.info.focus).length
			},
			funs: function () {
				return this.info.funs.length
			}
		},
		ready: function () {
			console.log(this.sinfo)
		}
	}
</script>
<style scoped>
	.img {
		padding: 20px 0;
	}
	.img>div{
		width: 7rem;
		height: 7rem;
		margin: 0 auto;
		background-color: yellow;
		text-align: center;
	}
	.img span {
		line-height: 7rem;
	}
	.name {
		text-align: center;
		font-size: 2rem;
		padding: 5px 0;
	}

	.social, .introduction{
		text-align: center;
		padding: 5px;
	}
	.social>span {
		border-bottom: 1px solid #ccc;
		padding: 0 8px;
	}
</style>